import { React, useRef } from 'react';
import './augment.css';
import '../../../index.css';
import axios from 'axios';
import InterIP from '../../../IP/IP';
import { useNavigate } from 'react-router';

export default function Sitechange() {


    const changeName = useRef();
    const changearea = useRef();
    const changestreet = useRef();
    const changephone = useRef();
    const changecomment = useRef();
    const navigate = useNavigate()
    let IP = InterIP().props.children;


    function saveSite() {
        var userID = document.cookie.slice(5);
        var Iphone = changephone.current.value * 1;
        if (!isNaN(Iphone)) {
            axios.post("http://" + IP + ":3000/user/addAddress", {
                consignee: changeName.current.value,
                area: changearea.current.value,
                street: changestreet.current.value,
                contact_phone: Iphone,
                comment: changecomment.current.value,
                user_id: userID,
                default_address: '0',
            })
                .then((res) => {
                    console.log(res);
                    navigate('/home/person/regulator', {})
                })
        } else {
            alert('你家电话号带字母的！！！')
        }
    }

    return (
        <div id="mybill">
            <div className="mybill_top">添加地址</div>
            <div className="augment_main">
                <ul className="tyc_area">
                    <li>
                        <span>*</span>
                        <strong>收货人姓名：</strong>
                        <input type="text" placeholder="收货人姓名" ref={changeName} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>选择地区：</strong>
                        <input type="text" placeholder="收货人地区" ref={changearea} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>详细地址：</strong>
                        <input type="text" placeholder="用于接收货物的详细地址" ref={changestreet} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>联系电话：</strong>
                        <input type="text" placeholder="推荐使用手机号" ref={changephone} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>备注信息：</strong>
                        <input type="text" placeholder="输入备注" ref={changecomment} />
                    </li>
                </ul>
                <button className="augment_button" onClick={saveSite}>保存</button>
            </div>
        </div>
    )
}